<template>
  <div class="banner">
    <div class="imgbox">
      <img v-for="item in imgs" :src="item.src" :alt="item.title" :title="item.name" :key="item.bannerId">
      <slot name="btn" :a="index">
        <div class="btns">
          <button>组件内部-左</button>
          <button>组件内部-右</button>
        </div>
      </slot>
      <slot name="list">
        <div class="list">
          <ul>
            <li v-for="i in imgs.length" :key="i">组件内部-点</li>
          </ul>
        </div>
      </slot>
      <p>{{index}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgs: {
      required: true,
      type: Array
    },
    index: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss">
.banner{
  width: 100vw;
  height: 3rem;
  .imgbox{
    width: 100vw;
    height: 3rem;
    img{
      width: 100vw;
      height: 3rem;
      display: block;
    }
  }
}
</style>
